<script setup lang="ts" name="Logo">
// import variables from '@/assets/styles/global.module.scss'
import logoUrl from "~/assets/images/Layout/Logo/logo.png"
const variables = {}

const appStore = useAppStore()
const isCollapse = computed(() => !appStore.sidebar.opened);
let opened = computed(() => appStore.sidebar.opened);

const config = useRuntimeConfig();

const title = config.public.appTitle;

const settingsStore = useSettingsStore();

const sideTheme = computed(() => settingsStore.sideTheme);

</script>

<template>
  <div
      class="sidebar-logo-container"
      :class="{ 'collapse': isCollapse }"
      :style="{ backgroundColor: sideTheme === 'dark' ? variables.menuBackground : variables.menuLightBackground }"
  >
    <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" />
    <span
        class="logo-text"
        :style="{ color: sideTheme === 'dark' ? variables.menuColor : variables.menuLightColor }"
        v-show="opened"
    >
      {{ title }}
    </span>
  </div>
</template>

<style scoped lang="scss">
</style>